import React, { useState } from "react";
import { Form, Input, Button } from "antd-mobile";
import axios from "../../utils/index";
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
import { useNavigate } from "react-router-dom";
function Index() {
  const naviagte=useNavigate()
  const [visible, setVisible] = useState(false)
  const onFinish = async (value) => {
    const resp = await axios.post("/login", value);
    const {code,data,message}=resp.data
    if(code===200){
      naviagte('/my')
      alert(message)
      localStorage.setItem('token',data.token)
    }else{
      alert(message)
    }
  };
  return (
    <div>
      <Form
        onFinish={onFinish}
        layout="horizontal"
        footer={
          <Button block type="submit" color="primary" size="large">
            提交
          </Button>
        }
      >
        <Form.Item
          name="username"
          label="账号"
          rules={[
            { required: true, message: "账号不能为空" },
            {
              pattern: /\w+@\w+\.com/,
              message: "请输入正确的",
            },
          ]}
        >
          <Input onChange={console.log} placeholder="请输入账号" />
        </Form.Item>
        <Form.Item
            label='密码'
            name='password'
            extra={
              <div >
                {!visible ? (
                  <EyeInvisibleOutline onClick={() => setVisible(true)} />
                ) : (
                  <EyeOutline onClick={() => setVisible(false)} />
                )}
              </div>
            }
          >
            <Input
              placeholder='请输入密码'
              clearable
              type={visible ? 'text' : 'password'}
            />
          </Form.Item>
      </Form>
    </div>
  );
}

export default Index;
